﻿
@extends('common.header')
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<title>{{ $tdk->title }}{{ $webConfig->webName }}</title>
<meta name="Keywords" content="{{ $tdk->keywords }}" />
<meta name="Description" content="{{ $tdk->desc }}"/>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="shortcut icon" href="{{ asset('/images/favicon.ico') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('/css/photos/pic-lib-index.css') }}"/>
<script src=" {{ asset('/js/jquery-1.9.1.min.js') }} "></script>
<script type="text/javascript" src="{{ asset('/js/masonry-docs.min.js') }}"></script>

<script>

	<!-- 2.设置全局ajax选项 -->
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	// 获取 token
	var _token = $('meta[name="csrf-token"]').attr('content');

</script> 

<script>
	
	// 点赞
	function replyPraise( prefix,id,likeType )
	{
		var obj = $("#"+prefix+"_praise_"+id);
		var isPraise = obj.attr('isPraise');
		if (isPraise == 'false')
		{
			// 未点赞
			// 获取 现有 赞数
			var num = parseInt($("#"+prefix+"_praise_txt_"+id).text());
			// +1
			num += 1;
			$("#"+prefix+"_praise_txt_"+id).text(num);
			// 已赞图片
			$("#"+prefix+"_praise_img_"+id).attr("src", "{{ asset('/images/articles/yizan.png') }}");
			// 写进 数据库
			$.ajax({
				type: "post",
				url: "{{ url('/commentLike') }}/"+likeType,
				data: {id: id, _token: _token},
				async: false,
				dataType: "json",
				success: function (back)
				{
					// alert(back['show_info']);
				}
			});
			// 设置为 已点赞
			obj.attr('isPraise', 'true');

		}else
		{
			// 已点赞
			$("#"+prefix+"_praise_warn_"+id).html('');
			$("#"+prefix+"_praise_warn_"+id).html('您已赞过');
			$("#"+prefix+"_praise_warn_"+id).show();
			setTimeout(function(){
				$("#"+prefix+"_praise_warn_"+id).hide();
			},1000);
		}

	}
</script>

<script type="text/javascript">
	
	// 收藏
	function collect( prefix,id,collectType )
	{
		var obj = $("#"+prefix+"_collect_"+id);
		var isCollect = obj.attr('isCollect');
		if (isCollect == 'false')
		{
			// 未收藏
			
			// 写进 数据库
			$.ajax({
				type: "post",
				url: "{{ url('/collect') }}/"+collectType,
				data: {id: id,_token: _token},
				async: false,
				dataType: "json",
				success: function (back)
				{
					
					if( back['show_info']!='' )
					{
						$("#"+prefix+"_praise_warn_"+id).html('');
						$("#"+prefix+"_praise_warn_"+id).html('您已收藏过');
						$("#"+prefix+"_praise_warn_"+id).show();
						setTimeout(function(){
							$("#"+prefix+"_praise_warn_"+id).hide();
						},1000);
						// 已收藏图片
						$("#"+prefix+"_collect_img_"+id).attr("src", "{{ asset('/images/articles/yicang.png') }}");
					}else
					{
						$("#"+prefix+"_praise_warn_"+id).html('');
						$("#"+prefix+"_praise_warn_"+id).html('收藏成功');
						$("#"+prefix+"_praise_warn_"+id).show();
						setTimeout(function(){
							$("#"+prefix+"_praise_warn_"+id).hide();
						},1000);
						// 已收藏图片
						$("#"+prefix+"_collect_img_"+id).attr("src", "{{ asset('/images/articles/yicang.png') }}");
					}
					
				}
			});
			// 设置为 已收藏
			obj.attr('isCollect', 'true');
			
		}else
		{
			// 已收藏
			$("#"+prefix+"_praise_warn_"+id).html('');
			$("#"+prefix+"_praise_warn_"+id).html('您已收藏过');
			$("#"+prefix+"_praise_warn_"+id).show();
			setTimeout(function(){
				$("#"+prefix+"_praise_warn_"+id).hide();
			},1000);
			// 已收藏图片
			$("#"+prefix+"_collect_img_"+id).attr("src", "{{ asset('/images/articles/yicang.png') }}");
		}
	
	}
	
	// 页数等于 1
	var page = 2;
	// 是否 加载
	var isLoading = true;
	
	$(window).scroll(function()
	{
		// 窗口高度
		var wH = $(window).height();
		
		// 滚动条高度
		var sH = $(window).scrollTop();

		// 文本高度
		var dH = $(document).height();

		if(wH + sH < dH )
		{
			return;
		}

		run();

	});
	
	// 加载 图库
	function run()
	{
		if( !isLoading )
		{
			return;
		} 

		isLoading = false;
		var key_category = $("#key_category").attr('key_category');
		
		$.ajax({
			type: "post",
			url: "{{ url('/pubuliuPhoto') }}",
			data: { page:page,category_id:key_category, _token: _token },
			async: true,
			dataType:"json",
			success:function(back)
			{
				
				if( back['show_info'] && back['show_info']=='已全部加载' )
				{
					isLoading=false;
					$("#allLoad").html(back['show_info']);
					return false;
				}
				var sessionId = $("#sessionId").attr('sessionId');
				for(i=0;i<back.length;i++)
				{
				
var html = '';
html += "<div class='post' >";
	html += "<a href='{{ url('/photoDetail') }}/"+back[i]['id']+"'><img src='"+back[i]['pic_url']+"' alt='"+back[i]['title']+"'  title='"+back[i]['title']+"' /></a>";
	html += "<div class='textarea'> ";
		html += "<h3><a href='{{ url('/photoDetail') }}/"+back[i]['id']+"'>"+back[i]['title']+"</a></h3> ";
		html += "<p><a href='{{ url('/photoDetail') }}/"+back[i]['id']+"' >"+back[i]['title']+"</a></p>";
	html += "</div>";
	html += "<div class='share-box'>";
		<!-- 点赞 -->
		html += "<span id='photo_praise_warn_"+back[i]['id']+"' ></span>";
		html += "<div class='praise praise-z'>";
		html += "<span id='photo_praise_"+back[i]['id']+"'  onclick=\"replyPraise('photo',"+back[i]['id']+",5);\" isPraise='false'  style='cursor:pointer;' >";
		html += "<img src='{{ asset('/images/articles/zan.png') }}' id='photo_praise_img_"+back[i]['id']+"' />";
		html += "</span>";
		html += "<span id='photo_praise_txt_"+back[i]['id']+"'>"+back[i]['likes']+"</span>";
		html += "</div>";
		<!-- 评论 -->
		html += "<div class='praise praise-p'>";
		html += "<a href='{{ url('/photoDetail') }}/"+back[i]['id']+"'>";
		html += "<span class='share'>";
		html += "<img src='{{ asset('/images/articles/ping.png') }}' id='praise-img'/></span>";
		html += "</a>";
		html += "<span class='share_number'>"+back[i]['comments_total']+"</span>";
		html += "</div>";
		<!-- 收藏 -->
		html += "<div class='praise praise-c'>";
		if( sessionId )
		{
			html += "<span id='photo_collect_"+back[i]['id']+"' onclick=\"collect('photo',"+back[i]['id']+",3);\" style='padding-top:-6px;display:inline-block;cursor:pointer;' isCollect='false'>";
				html += "<img src='{{ asset('/images/articles/cang.png') }}'  id='photo_collect_img_"+back[i]['id']+"'  >";
			html += "</span>";
		}else
		{
			html += "<span onclick=\"alert('请先登录')\" style='cursor:pointer;'  >";
				html += "<img src='{{ asset('/images/articles/cang.png') }}'  />";
			html += "</span>";	
		}
		html += "</div>";
		
		
html += "</div>";
html += "</div>";
$("#listing").append(html);
					
				}
				page ++;
				isLoading = true;
			}
		});

	}

	
</script>
</head>
<body style="background:#fff">

<div id="key_category" key_category="{{ $category_info->id }}" ></div>






<!--面包屑导航-->
<div style="width: 1200px;height: 40px;line-height:40px;position: relative;margin: 110px auto 0">
    <ol style="float: left;overflow: hidden;color: #333;list-style: none;">
        <li style="float: left;margin-left: 5px">当前位置：</li>
        <li style="float: left;margin-left: 5px">
			<a href="{{ url('/') }}" style="color: #de1e30;margin-left: 5px">首页</a>
		</li>
		<li style="float: left;margin-left: 5px"><a href="{{ url('/photoList') }}"
                                                                      style="color: #de1e30;margin-left: 5px">> 图库</a>
        </li>
        <li style="float: left;margin-left: 5px">
			<a href="{{ url('/photoCategoryList') }}/{{ $category_info->id }}" style="color: #de1e30;margin-left: 5px">> {{ $category_info->name }}</a>
		</li>
    </ol>
</div>



<div style="width: 1200px;heigth:auto;margin:0 auto;overflow:hidden">
	
	<!-- 左侧 导航 -->
	<div class="aside" id="asideLeft">
		<ul>
			@forelse( $category as $key => $info )
			@if( $info->id== $category_info->id )
				<li class="current" >
			@else
				<li>
			@endif
				<a href="{{ url('/photoCategoryList') }}/{{ $info->id }}" >
					<span>{{ $info->name }}</span>
				</a>
			</li>
			@empty
			@endforelse
		</ul>
	</div>

	
	<!--右侧 图库 列表-->
	<div style="float: right;" id="asideRight">
		 <!-- 瀑布流区域 -->
		<div class="pic-falls">
			<div id="listing" class="container-fluid" >
				
				@forelse( $photos as $key => $photo_info )
				<div class="post" >
					<a href="{{ url('/photoDetail') }}/{{ $photo_info['id'] }}"><img src="{{ $photo_info['pic_url'] }}" alt="{{ $photo_info['title'] }}"  title="{{ $photo_info['title'] }}" /></a>
					
					<!--标题 内容-->
					<div class="textarea">
						<h3><a href="{{ url('/photoDetail') }}/{{ $photo_info['id'] }}">{{ $photo_info['title'] }}</a></h3>
						<p><a href="{{ url('/photoDetail') }}/{{ $photo_info['id'] }}" >{{ $photo_info['desc'] }}</a></p>
					</div>
					
					<div class="share-box">
					
						<!-- 点赞 -->
						<span id="photo_praise_warn_{{ $photo_info['id'] }}"></span>
						<div class="praise praise-z">
							<span id="photo_praise_{{ $photo_info['id'] }}" onclick="replyPraise('photo',{{ $photo_info['id'] }},5);" isPraise="false"  style="cursor:pointer;" >
								<img src="{{ asset('/images/articles/zan.png') }}" id="photo_praise_img_{{ $photo_info['id'] }}" />
							</span>
							<span id="photo_praise_txt_{{ $photo_info['id'] }}">{{ $photo_info['likes'] }}</span>
						</div>

						<!-- 评论 -->
						<div class="praise praise-p">
							<a href="{{ url('/photoDetail') }}/{{ $photo_info['id'] }}">
								<span class="share">
								<img src="{{ asset('/images/articles/ping.png') }}" id="praise-img"/></span>
							</a>
							<span class="share_number">{{ $photo_info['comments_total'] }}</span>
						</div>
						
						<!-- 收藏 -->
						<div class="praise praise-c">
							@if( session('user_name') )
								<span id="photo_collect_{{ $photo_info['id'] }}" onclick="collect('photo',{{ $photo_info['id'] }},3);" style="padding-top:-6px;display:inline-block;cursor:pointer;" isCollect='false'  >
									<img src="{{ asset('/images/articles/cang.png') }}"  id="photo_collect_img_{{ $photo_info['id'] }}"  >
								</span>		
							@else
								<span id="collectLogin" style="cursor:pointer;"  >
									<img src="{{ asset('/images/articles/cang.png') }}"  />
								</span>		
							@endif
						</div>
						
					</div>
				</div>
				@empty
				@endforelse
				


			</div>
		</div>

		
		<div id="allLoad" style="width:600px;text-align:right;font-size:16px;color:#8a8a8a" >
		</div>
		
		
	</div>
	
	
	
</div>

	<div id="sessionId" sessionId="{{ session('user_name') or '' }}" ></div>

</div>
@extends('common.footer')




</body>
</html>